<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
vue指令
带有v-前缀的特殊标签属性,不同属性对应不同的功能

第一种方式
v-on:事件名=“内联语句”
v-on: 也可以替换成@

第二种方式
v-on:事件名=“methods中的函数名”
v-on:事件名=“methods中的函数名(参数列表)”
-->

<body>
    <div id="app">
        <button @click="count--">-</button>
        <span>{{count}}</span>
        <!-- 不带参数的函数调用 -->
        <button v-on:click="add">+</button>
        <hr title="华丽的分割线">
        <div>
            <h3 v-html="shouName"></h3>
            <button @click="reduce(coalorPrice)">可乐{{coalorPrice}}元</button>
            <button v-on:click="reduce(coffeePrice)">咖啡{{coffeePrice}}元</button>
            <span>余额：{{remain}}</span>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                count: 23,
                remain: 100,
                shouName: '小黑自动售货机',
                coalorPrice: 5,
                coffeePrice: 10
            },
            methods: {
                // 让提供的所有methods中的函数，this都指向当前实例
                add() {
                    console.log("加一")
                    // 打印this和app，可以看到是一样的
                    console.log(this)
                    console.log(app)
                    this.count++
                },
                reduce(money) {
                    if (money > this.remain) {
                        console.log("余额不足，请充值")
                        return;
                    }
                    this.remain -= money
                }
            }
        }) 
    </script>

</body>

</html>